<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content" class="text-000 text-black">影片搜索</block>
    </cu-custom>
    <!--		    搜索栏-->
    <view class="flex justify-between align-center bg-white padding" style="width:100%">
      <view class="flex" style="width:700rpx">
        <input type="text" placeholder="输入电影名称" style="width:100%;height: 64rpx;"
               class="bg-gray radius padding-lr" v-model="value" @input="inputFill" @confirm="fetchData">
        <text class="iconfont icon-cancel text-gray text-xl relative margin-top-xs" style="right:50rpx" v-if="value"
              @tap="off"></text>
      </view>
      <view class="margin-left" style="width:10%" @tap="cancle">取消</view>
    </view>
    <!--    搜索列表开始-->
    <view>
      <view class="flex justify-between bg-white align-center padding solid-bottom" v-for="(item,index) in search"
            :key="index">
        <!--左边-->
        <view class="flex">
          <!--左边left图片-->
          <navigator hover-class="none" :url="'/pages/movie/movie?show_id='+item.yid">
            <view class="margin-right-sm">
              <img :src="$tools.mThumb($config.movieImgDomain+item.poster,250)"
                   style="width:180rpx;height:220rpx;" class="radius"/>
            </view>
          </navigator>

          <!--左边left标题-->
          <view class="text-gray">
            <view class="text-black text-bold text-lg margin-right margin-top-xs"
                  style="width:330rpx;overflow:hidden;text-overflow: ellipsis;word-break:keep-all;white-space:nowrap;">
              {{ item.show_name }}
            </view>
            <view class="margin-top-xs">
              <block v-if="item.remark">
                <text class="margin-right-xs">评分</text>
                <text class="text-yellow">{{ item.remark }}分</text>
              </block>
              <block v-else>
                <text class="margin-right-xs">暂无评分</text>
              </block>

            </view>
            <view class="margin-top-xs">
              <text class="inline-block"
                    style="width:360rpx;overflow:hidden;text-overflow: ellipsis;word-break:keep-all;white-space:nowrap;">
                主演:{{ item.leading_role }}
              </text>
            </view>
            <view class="margin-top-xs">
              {{ item.open_time }}上映
            </view>
          </view>
        </view>
        <!--右边-->
        <navigator :url="url(item)" v-if="item.showtype">
          <button class="cu-btn bg-red radius-lg">购票</button>
        </navigator>
        <navigator :url="url(item)" v-else>
          <button class="cu-btn bg-blue radius-lg">预售</button>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current_page: 1,
      search: '',
      value: ''
    }
  },
  computed: {
    location() {
      return this.$tools.location();
    },
    url(item) {
      return function (item) {
        return `/pages/cinema/movie_cinema?show_id=${item.yid}&name=${item.show_name}`
      }

    }
  },
  methods: {
    inputFill(e) {
      this.keyword = e.detail.value
    },
    async fetchData() {
      let res = await this.$api.search({keyword: this.keyword, city_name: this.location.city, page: this.current_page})
      this.search = res.data.list
    },
    cancle() {
      console.log('cancel')
      this.value = ""
      this.search = []
    },
    off(e) {
      console.log('aaaaaaaaaa')
      console.log(e)
      this.value = ''
    }
  }
}
</script>

<style>
</style> 